.
<template>
  <div class="Main">
    <div class="middle">
      <div class="m_text" @click="getAll">
        <van-icon name="friends" size="30px" color="#9A0000" />
        总人数：{{ toDayData.allUser }}
      </div>
      <div class="m_text" @click="getOnline">
        <van-icon name="manager" size="30px" color="#9A0000" />
        在实人数：{{ toDayData.nowUser }}
      </div>
      <div class="m_text" @click="getOut">
        <van-icon name="arrow" size="30px" color="#9A0000" />
        离开人数：{{ toDayData.leaveUser }}
      </div>
      <van-button type="primary" to="/user" class="fingerbtn">
        注册指纹
      </van-button>
    </div>
    <div class="end">
      <n-spin :show="show">
        <n-data-table
          :columns="columns"
          :data="data"
          :pagination="pagination"
          :row-key="(row) => row.number"
        >
          <template #empty>
            <n-empty description="你什么也找不到" size="large">
              <template #extra>
                {{ show == true ? "正在加载数据" : "无数据" }}
              </template>
            </n-empty>
          </template>
        </n-data-table>
      </n-spin>
    </div>
  </div>
</template>

<script>
import { getTableData } from "@/api/home";
import { computed, reactive, toRefs } from "vue";
import { format } from "@/utils/day.js";
import { h } from "vue";
import { NTag, useMessage } from "naive-ui";
// import { diff_m } from "@/utils/day.js";
const createColumns = () => {
  return [
    {
      title: "序号",
      key: "number",
    },
    {
      title: "单位",
      key: "unitGroup",
    },
    {
      title: "课题组",
      key: "userGroup",
    },
    {
      title: "姓名",
      key: "userName",
    },
    {
      title: "身份",
      key: "userClass",
      render(row) {
        return h(
          NTag,
          {
            style: {
              marginRight: "6px",
            },
            type: row.userGroup == "学生" ? "success" : "info",
          },
          {
            default: () => row.userGroup,
          }
        );
      },
    },
    {
      title: "日期",
      key: "date",
    },

    {
      title: "进入时间",
      key: "inTime",
    },
    {
      title: "离开时间",
      key: "outTime",
      render(row) {
        if (!row.outTime) {
          return "未签退";
        }
        return row.outTime;
      },
    },
    {
      title: "时长",
      key: "signTime",
      render(row) {
        if (!row.signTime) {
          return "未签退";
        }
        return row.signTime + "/h";
      },
    },
    {
      title: "事由",
      key: "toDo",
      render(row) {
        return h(
          NTag,
          {
            style: {
              marginRight: "6px",
            },
            type: "info",
          },
          {
            default: () => row.toDo,
          }
        );
      },
    },
    {
      title: "备注",
      key: "msg",
    },
  ];
};
export default {
  setup() {
    const message = useMessage();
    const state = reactive({
      toDayData: {
        allUser: 0,
        leaveUser: 0,
        nowUser: 0,
      },
      tabledata: [],
      show: true,
    });

    let fixdata = [];

    const gettabledata = async () => {
      try {
        const { data } = await getTableData();
        state.toDayData = data.toDayData;

        data.toDayTable.forEach((item, index) => {
          item.number = index + 1;
          item.date = format(item.date);
        });
        state.tabledata.push(...data.toDayTable);
        fixdata = state.tabledata;
        state.show = false;
      } catch {
        message.error("获取表格信息错误！！！！", {
          duration: 5000,
          closable: true,
        });
      }
    };
    const getAll = () => {
      state.tabledata = fixdata;
    };
    const getOnline = () => {
      let table = [];
      fixdata.forEach((item) => {
        if (!item.outTime) {
          table.push(item);
        }
      });
      state.tabledata = table;
    };
    const getOut = () => {
      let table = [];
      fixdata.forEach((item) => {
        if (item.outTime) {
          table.push(item);
        }
      });
      state.tabledata = table;
    };

    gettabledata();

    //const message = useMessage();
    return {
      getOut,
      getAll,
      getOnline,
      ...toRefs(state),
      data: computed(() => state.tabledata),
      columns: createColumns(),
      pagination: {
        pageSize: 7,
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.Main {
  width: 90%;
  margin: auto;
  .middle {
    display: flex;
    justify-content: flex-start;
    margin: 10px 0;
    .m_text {
      width: 150px;
      height: 30px;
      background-color: #fff;
      margin-right: 10px;
      display: flex;
      justify-content: space-between;
      padding: 15px;
      align-items: center;
      font-size: 18px;
      border-radius: 15px;
      box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.4);
    }
    .fingerbtn {
      position: absolute;
      right: 30px;
    }
  }
  .end {
    padding: 10px;
    background-color: #fff;
  }
}
</style>
